<template>
  <PageWrapper title="表单基础示例" contentFullHeight>
    <CollapseContainer title="基础示例">
      <BasicForm
        autoFocusFirstItem
        :labelWidth="200"
        :schemas="schemas"
        :actionColOptions="{ span: 24 }"
        :labelCol="{ span: 8 }"
        @submit="handleSubmit"
        @reset="handleReset"
      >
        <template #jAreaLinkage="{ model, field }">
          <JAreaLinkage v-model:value="model[field]" :showArea="true" :showAll="false" />
        </template>
        <template #localSearch="{ model, field }">
          <ApiSelect
            :api="optionsListApi"
            showSearch
            v-model:value="model[field]"
            optionFilterProp="label"
            resultField="list"
            labelField="name"
            valueField="id"
          />
        </template>
        <template #selectA="{ model, field }">
          <a-select :options="optionsA" mode="multiple" v-model:value="model[field]" @change="valueSelectA = model[field]" allowClear />
        </template>
        <template #selectB="{ model, field }">
          <a-select :options="optionsB" mode="multiple" v-model:value="model[field]" @change="valueSelectB = model[field]" allowClear />
        </template>
        <template #remoteSearch="{ model, field }">
          <ApiSelect
            :api="optionsListApi"
            showSearch
            v-model:value="model[field]"
            :filterOption="false"
            resultField="list"
            labelField="name"
            valueField="id"
            @search="onSearch"
          />
        </template>
      </BasicForm>
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts">
  import { computed, defineComponent, unref, ref } from "vue"
  import { BasicForm, FormSchema, ApiSelect, JAreaLinkage } from "/@/components/Form/index"
  import { CollapseContainer } from "/@/components/Container"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { PageWrapper } from "/@/components/Page"

  import { optionsListApi } from "/@/api/demo/select"
  import { useDebounceFn } from "@vueuse/core"
  import { treeOptionsListApi } from "/@/api/demo/tree"
  import { Select } from "ant-design-vue"
  import { cloneDeep } from "lodash-es"

  const valueSelectA = ref<string[]>([])
  const valueSelectB = ref<string[]>([])
  const options = ref<Recordable[]>([])
  for (let i = 1; i < 10; i++) options.value.push({ label: "选项" + i, value: `${i}` })

  const optionsA = computed(() => {
    return cloneDeep(unref(options)).map((op) => {
      op.disabled = unref(valueSelectB).indexOf(op.value) !== -1
      return op
    })
  })
  const optionsB = computed(() => {
    return cloneDeep(unref(options)).map((op) => {
      op.disabled = unref(valueSelectA).indexOf(op.value) !== -1
      return op
    })
  })
  const provincesOptions = [
    {
      id: "guangdong",
      label: "广东省",
      value: "1",
      key: "1",
    },
    {
      id: "jiangsu",
      label: "江苏省",
      value: "2",
      key: "2",
    },
  ]
  const citiesOptionsData = {
    guangdong: [
      {
        label: "珠海市",
        value: "1",
        key: "1",
      },
      {
        label: "深圳市",
        value: "2",
        key: "2",
      },
      {
        label: "广州市",
        value: "3",
        key: "3",
      },
    ],
    jiangsu: [
      {
        label: "南京市",
        value: "1",
        key: "1",
      },
      {
        label: "无锡市",
        value: "2",
        key: "2",
      },
      {
        label: "苏州市",
        value: "3",
        key: "3",
      },
    ],
  }

  const schemas: FormSchema[] = [
    {
      field: "divider-basic",
      component: "Divider",
      label: "基础字段",
    },
    {
      field: "field1",
      component: "Input",
      label: "字段1",

      colProps: {
        span: 8,
      },
      // componentProps:{},
      // can func
      componentProps: ({ schema, formModel }) => {
        console.log("form:", schema)
        console.log("formModel:", formModel)
        return {
          placeholder: "自定义placeholder",
          onChange: (e: any) => {
            console.log(e)
          },
        }
      },
      renderComponentContent: () => {
        return {
          prefix: () => "pSlot",
          suffix: () => "sSlot",
        }
      },
    },
    {
      field: "field2",
      component: "Input",
      label: "字段2",
      defaultValue: "111",
      colProps: {
        span: 8,
      },
      componentProps: {
        onChange: (e: any) => {
          console.log(e)
        },
      },
      suffix: "天",
    },
    {
      field: "field3",
      component: "DatePicker",
      label: "字段3",
      colProps: {
        span: 8,
      },
    },
    {
      field: "field4",
      component: "Select",
      label: "字段4",
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
          {
            label: "选项1",
            value: "1",
            key: "1",
          },
          {
            label: "选项2",
            value: "2",
            key: "2",
          },
        ],
      },
    },
    {
      field: "field5",
      component: "CheckboxGroup",
      label: "字段5",
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
          {
            label: "选项1",
            value: "1",
          },
          {
            label: "选项2",
            value: "2",
          },
        ],
      },
    },
    {
      field: "field7",
      component: "RadioGroup",
      label: "字段7",
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
          {
            label: "选项1",
            value: "1",
          },
          {
            label: "选项2",
            value: "2",
          },
        ],
      },
    },
    {
      field: "field8",
      component: "Checkbox",
      label: "字段8",
      colProps: {
        span: 8,
      },
      renderComponentContent: "Check",
    },
    {
      field: "field9",
      component: "Switch",
      label: "字段9",
      colProps: {
        span: 8,
      },
    },
    {
      field: "field10",
      component: "RadioButtonGroup",
      label: "字段10",
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
          {
            label: "选项1",
            value: "1",
          },
          {
            label: "选项2",
            value: "2",
          },
        ],
      },
    },
    {
      field: "field11",
      component: "Cascader",
      label: "字段11",
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
          {
            value: "zhejiang",
            label: "Zhejiang",
            children: [
              {
                value: "hangzhou",
                label: "Hangzhou",
                children: [
                  {
                    value: "xihu",
                    label: "West Lake",
                  },
                ],
              },
            ],
          },
          {
            value: "jiangsu",
            label: "Jiangsu",
            children: [
              {
                value: "nanjing",
                label: "Nanjing",
                children: [
                  {
                    value: "zhonghuamen",
                    label: "Zhong Hua Men",
                  },
                ],
              },
            ],
          },
        ],
      },
    },
    {
      field: "divider-api-select",
      component: "Divider",
      label: "远程下拉演示",
    },
    {
      field: "field30",
      component: "ApiSelect",
      label: "懒加载远程下拉",
      required: true,
      componentProps: {
        // more details see /src/components/Form/src/components/ApiSelect.vue
        api: optionsListApi,
        params: {
          id: 1,
        },
        showSearch: true,
        resultField: "list",
        // use name as label
        labelField: "name",
        // use id as value
        valueField: "id",
        // not request untill to select
        immediate: false,
        onChange: (e) => {
          console.log("selected:", e)
        },
        // atfer request callback
        onOptionsChange: (options) => {},
      },
      colProps: {
        span: 8,
      },
      defaultValue: "0",
    },
    {
      field: "field311",
      component: "JAreaLinkage",
      label: "省市区选择",
      helpMessage: ["JAreaLinkage组件", "省市区选择"],
      required: true,
      slot: "jAreaLinkage",
      colProps: {
        span: 8,
      },
      defaultValue: ["130000", "130200"],
    },
    {
      field: "field31",
      component: "Input",
      label: "下拉本地搜索",
      helpMessage: ["ApiSelect组件", "远程数据源本地搜索", "只发起一次请求获取所有选项"],
      required: true,
      slot: "localSearch",
      colProps: {
        span: 8,
      },
      defaultValue: "0",
    },
    {
      field: "field32",
      component: "Input",
      label: "下拉远程搜索",
      helpMessage: ["ApiSelect组件", "将关键词发送到接口进行远程搜索"],
      required: true,
      slot: "remoteSearch",
      colProps: {
        span: 8,
      },
      defaultValue: "0",
    },
    {
      field: "field33",
      component: "ApiTreeSelect",
      label: "远程下拉树",
      helpMessage: ["ApiTreeSelect组件", "使用接口提供的数据生成选项"],
      required: true,
      componentProps: {
        api: treeOptionsListApi,
        resultField: "list",
      },
      colProps: {
        span: 8,
      },
    },
    {
      field: "field34",
      component: "ApiRadioGroup",
      label: "远程Radio",
      helpMessage: ["ApiRadioGroup组件", "使用接口提供的数据生成选项"],
      required: true,
      componentProps: {
        api: optionsListApi,
        params: {
          count: 2,
        },
        resultField: "list",
        // use name as label
        labelField: "name",
        // use id as value
        valueField: "id",
      },
      defaultValue: "1",
      colProps: {
        span: 8,
      },
    },
    {
      field: "field35",
      component: "ApiRadioGroup",
      label: "远程Radio",
      helpMessage: ["ApiRadioGroup组件", "使用接口提供的数据生成选项"],
      required: true,
      componentProps: {
        api: optionsListApi,
        params: {
          count: 2,
        },
        resultField: "list",
        // use name as label
        labelField: "name",
        // use id as value
        valueField: "id",
        isBtn: true,
      },
      colProps: {
        span: 8,
      },
    },
    {
      field: "divider-linked",
      component: "Divider",
      label: "字段联动",
    },
    {
      field: "province",
      component: "Select",
      label: "省份",
      colProps: {
        span: 8,
      },
      componentProps: ({ formModel, formActionType }) => {
        return {
          options: provincesOptions,
          placeholder: "省份与城市联动",
          onChange: (e: any) => {
            // console.log(e)
            let citiesOptions = e == 1 ? citiesOptionsData[provincesOptions[0].id] : citiesOptionsData[provincesOptions[1].id]
            // console.log(citiesOptions)
            if (e === undefined) {
              citiesOptions = []
            }
            formModel.city = undefined //  reset city value
            const { updateSchema } = formActionType
            updateSchema({
              field: "city",
              componentProps: {
                options: citiesOptions,
              },
            })
          },
        }
      },
    },
    {
      field: "city",
      component: "Select",
      label: "城市",
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [], // defalut []
        placeholder: "省份与城市联动",
      },
    },
    {
      field: "divider-selects",
      component: "Divider",
      label: "互斥多选",
      helpMessage: ["两个Select共用数据源", "但不可选择对方已选中的项目"],
    },
    {
      field: "selectA",
      component: "Select",
      label: "互斥SelectA",
      slot: "selectA",
      defaultValue: [],
      colProps: {
        span: 8,
      },
    },
    {
      field: "selectB",
      component: "Select",
      label: "互斥SelectB",
      slot: "selectB",
      defaultValue: [],
      colProps: {
        span: 8,
      },
    },
    {
      field: "divider-others",
      component: "Divider",
      label: "其它",
    },
    {
      field: "field20",
      component: "InputNumber",
      label: "字段20",
      required: true,
      colProps: {
        span: 8,
      },
    },
    {
      field: "field21",
      component: "Slider",
      label: "字段21",
      componentProps: {
        min: 0,
        max: 100,
        range: true,
        marks: {
          20: "20°C",
          60: "60°C",
        },
      },
      colProps: {
        span: 8,
      },
    },
    {
      field: "field22",
      component: "Rate",
      label: "字段22",
      defaultValue: 3,
      colProps: {
        span: 8,
      },
      componentProps: {
        disabled: false,
        allowHalf: true,
      },
    },
  ]

  export default defineComponent({
    components: {
      BasicForm,
      CollapseContainer,
      PageWrapper,
      ApiSelect,
      JAreaLinkage,
      ASelect: Select,
    },
    setup() {
      const check = ref(null)
      const { createMessage } = useMessage()
      const keyword = ref<string>("")
      const searchParams = computed<Recordable>(() => {
        return { keyword: unref(keyword) }
      })

      function onSearch(value: string) {
        keyword.value = value
      }
      function areaChange(value) {
        alert(value)
      }

      return {
        schemas,
        optionsListApi,
        optionsA,
        optionsB,
        valueSelectA,
        valueSelectB,
        onSearch: useDebounceFn(onSearch, 300),
        searchParams,
        handleReset: () => {
          keyword.value = ""
        },
        handleSubmit: (values: any) => {
          createMessage.success("click search,values:" + JSON.stringify(values))
        },
        check,
      }
    },
  })
</script>
